<script setup lang="ts">
import AMapLoader from '@amap/amap-jsapi-loader' // 使用加载器加载JSAPI，可以避免异步加载、重复加载等常见错误加载错误
import { defineExpose, onMounted, toRefs } from 'vue'

const props = withDefaults(defineProps<{
    rows?: any
    types?: any
}>(), {
    rows: {

    },
    types: null,
})

const form: any = ref({
    jd: '',
    name: '',
    wd: '',
    xzid: '',
})

const searchKey = ref('')
const { rows, types } = toRefs(props)

if (types.value === 2) {
    form.value.name = rows.value.value.mingc
    form.value.xzid = rows.value.value.xingzqid
    form.value.jd = rows.value.value.jingd
    form.value.wd = rows.value.value.weid
}
let map: any = null // 初始化地图
function initMap() {
    AMapLoader.load({
        key: '8e125d7a61c3c334ca9538a5c6798582', // 申请好的Web端开发者Key，首次调用 load 时必填
        plugins: [
            'AMap.Geocoder',
            'AMap.PlaceSearch',
            'AMap.Scale', // 工具条，控制地图的缩放、平移等
            'AMap.ToolBar', // 比例尺，显示当前地图中心的比例尺
            'AMap.Geolocation', // 定位，提供了获取用户当前准确位置、所在城市的方法
            'AMap.HawkEye', // 鹰眼，显示缩略图
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
        version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    })
        .then((AMap) => {
            map = new AMap.Map('map', {
                center: [form.value && form.value.jd ? form.value.jd : 114.304569, form.value && form.value.wd ? form.value.jd : 30.593354], // 初始化地图中心点位置
                doubleClickZoom: true, // 双击放大缩小

                dragEnable: true, // 禁止鼠标拖拽
                keyboardEnable: true, // 键盘控制放大缩小移动旋转
                scrollWheel: true, // 鼠标滚轮放大缩小
                viewMode: '2D', // 是否为3D地图模式
                // 设置地图容器id
                zoom: 15, // 初始化地图层级
            })
            map.setDefaultCursor('pointer') // 使用CSS默认样式定义地图上的鼠标样式（default/pointer/move/crosshair）
            map.addControl(new AMap.Scale()) // 异步同时加载多个插件
            map.addControl(new AMap.ToolBar())
            // map.addControl(new AMap.Geolocation());
            // let HawkEye = new AMap.HawkEye({
            //   position: 'LT', //控件停靠位置（LT/RT/LB/RB）
            // });
            // map.addControl(HawkEye);
            // map.add(
            //   new AMap.Marker({
            //     position: map.getCenter(),
            //   })
            // );
            // map.add(marker); // 地图添加标记
            // AMapLoader.load({
            //   //可多次调用load
            //   plugins: ['AMap.MapType'],
            // })
            //   .then((AMap) => {
            //     map.addControl(new AMap.MapType());
            //   })
            //   .catch((e) => {
            //     console.error(e);
            //   });
            // 显示地图层级与中心点信息
            function logMapinfo() {
                const zoom = map.getZoom() // 获取当前地图级别
                const center = map.getCenter() // 获取当前地图中心位置
                console.log(zoom, center)
            }
            // 绑定地图移动与缩放事件
            map.on('moveend', logMapinfo)
            map.on('zoomend', logMapinfo)
            // 为地图注册click事件获取鼠标点击出的经纬度坐标
            map.on('click', (e: any) => {
                form.value.jd = e.lnglat.getLng()
                form.value.wd = e.lnglat.getLat()
                // document.getElementById('lnglat').value = e.lnglat.getLng() + ',' + e.lnglat.getLat();
                openInfoWindow()
            })
            openInfoWindow()
        })
        .catch((e) => {
            console.log(e)
        })
}
function openInfoWindow() {
    const infoWindow = new AMap.InfoWindow({
        // anchor: 'top-right', //信息窗体的三角所在位置
        content: `<h4>经度${form.value && form.value.jd ? form.value.jd : 114.304569}，纬度${form.value && form.value.wd ? form.value.wd : 30.593354}</h4>`, // 信息窗体的内容可以是任意html片段
        // 创建信息窗体
        isCustom: false, // 使用自定义窗体
        offset: new AMap.Pixel(0, 0),
    })
    infoWindow.open(map, [form.value && form.value.jd ? form.value.jd : 114.304569, form.value && form.value.wd ? form.value.wd : 30.593354]) // 填写想要窗体信息指示的坐标
}
// 搜索
function onPlaceSearch() {
    console.log(map)
    const placeSearch = new AMap.PlaceSearch({
        autoFitView: true, // 是否自动调整地图视野使绘制的 Marker 点都处于视口的可见范围
        // citylimit: true, //是否强制限制在设置的城市内搜索
        map, // 展现结果的地图实例
        // city: "010", //兴趣点城市
        pageIndex: 1, // 页码
        pageSize: 7, // 单页显示结果条数
        panel: 'search-list-box', // 结果列表将在此容器中进行展示。
    })
    placeSearch.search(searchKey.value, (status: any, result: any) => {
        console.log('status', status)

        console.log('placeSearch', result)
    })

    placeSearch.on('listElementClick', (e: any) => {
        console.log('onListElementClick', e)
        // this.poi = e.data
    })
    placeSearch.on('markerClick', (e: any) => {
        console.log('onMarkerClick', e)
        // this.poi = e.data
    })
    /*
        adname ：行政区
        location: 经纬度
        name： 标题
        address：地址
        */
}
// 调用地图初始化函数：onMounted 函数会在 DOM 初始化完成后调用，建议在 mounted 函数中调用地图初始化方法
onMounted(() => {
    initMap()
})
function formFn() {
    return form.value
}
defineExpose({
    formFn,
})
</script>

<template>
    <div>
        <div class="info">
            <el-form inline>
                <el-form-item label="名称:">
                    <el-input v-model="form.name"
                              style="width: 200px"
                              placeholder="请输入名称"
                    />
                </el-form-item>

                <el-form-item label="行政区域：">
                    <el-input v-model="form.xzid"
                              style="width: 200px"
                              placeholder="请输入行政区域"
                    />
                </el-form-item>

                <el-form-item label="当前经度：">
                    <el-input v-model="form.jd"
                              :disabled="true"
                              placeholder="请选择经度"
                              style="width: 200px"
                    />
                </el-form-item>

                <el-form-item label="当前维度：">
                    <el-input v-model="form.wd"
                              :disabled="true"
                              placeholder="请选择经度"
                              style="width: 200px"
                    />
                </el-form-item>
            </el-form>
        </div>

        <div class="input-card">
            <div class="search">
                <el-input v-model="searchKey"
                          placeholder="请输入地址"
                          @keyup.enter="onPlaceSearch"
                >
                    <template #append>
                        <el-button icon="el-icon-search"
                                   @click="onPlaceSearch"
                        />
                    </template>
                </el-input>

                <div id="search-list-box"
                     class="search-list-box"
                />
            </div>

            <div id="map" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
#map {
    /* margin: 50px auto; */
    width: 100%;
    height: 500px;
}
.input-card {
    display: flex;
    .search {
        flex: 0 0 180px;
        margin-right: 20px;
    }
}
</style>
